<template>
  <div id="app">
    <el-container>
      <el-header v-show="isNavShow" id="header-pane" height="6vh">
        <div id="nav">
          <el-row>
            <el-col :span="4">
              <div id="logo">
                <router-link to="/" id="logo-link">
                  <span class="theme">衍星</span>
                  <span class="black">书院</span>
                </router-link>
                <span id="logo-version">v0.7.0</span>
              </div>
            </el-col>
            <el-col :span="12">
              <el-menu :default-active="activeIndex" class="el-menu top-menu" id="top-menu" mode="horizontal" router>
                <el-menu-item index="/class"><span class="theme">学堂</span></el-menu-item>
                <el-menu-item index="/library"><span class="theme">书馆</span></el-menu-item>
                <el-menu-item index="/articles"><span class="theme">文斋</span></el-menu-item>
                <el-menu-item index="/pins"><span class="theme">剪藏</span></el-menu-item>
                <el-menu-item index="/poems"><span class="theme">诗社</span></el-menu-item>
                <el-menu-item index="/people"><span class="theme">茶肆</span></el-menu-item>
                <el-menu-item index="/coding"><span class="theme">码源</span></el-menu-item>
                <el-menu-item index="/dev"><span class="theme">开发</span></el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6">
              <!--
              <search />
              -->
            </el-col>
            <!--
            <el-col :span="2">
              <div class="lang">
                <locale @locale="changeLocale" />
              </div>
            </el-col>
            -->
            <el-col :span="2">
              <div class="options">
                <div v-show="!isAuthed">
                  <router-link to="/user/login">
                    <ri i="user" @click="login"></ri>
                  </router-link>
                </div>
                <div v-show="isAuthed">
                  <user-options></user-options>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main id="main-pane">
        <div>
          <router-view></router-view>
        </div>
      </el-main>
      <el-footer id="footer-pane" height="2vh">
        <a href="http://yanxingshuyuan.com">@2021 衍星书院</a>
        <a href="https://beian.miit.gov.cn/" target="_blank">桂ICP备2021001252号</a>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=45010202000520">
          桂公网安备 45010202000520 号
        </a>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import UserOptions from "./components/user/UserOptions.vue";
import { EVENT_BUS } from "./eventbus.js";

export default {
  name: "app",
  components: {
    UserOptions
  },
  data() {
    return {
      isNavShow: true
    };
  },
  computed: {
    isAuthed() {
      return this.$store.getters.isAuth;
    },
    activeIndex() {
      return this.$store.getters.activeMenuIndex;
    }
  },
  created() {
    let sitename = this.$t("sitename");
    document.title = sitename;

    EVENT_BUS.$on("HIDE_NAVMENU", this.hideNavMenu);

    // hide menubar in reader
    let self = this;
    this.$router.beforeEach((to, from, next) => {
      if (to.path.startsWith("/reader")) {
        self.isNavShow = false;
      } else {
        self.isNavShow = true;
      }
      next();
    });

    // check token
    //this.checkToken();

  },
  watch: {
    $route() {
      this.checkToken();
    }
  },
  methods: {
    login() {
      console.log("login");
    },
    changeLocale(loc) {
      this.$i18n.locale = loc;

    },
    userOptions() {
      console.log("show options");
    },
    hideNavMenu() {
      this.isNavShow = false;
    },
    checkToken() {
      let expireIn = this.$store.getters.expireIn;
      let expMinute = (new Date(expireIn).getTime() - Date.now()) / 1000 / 60;
      console.log("Token expire in ", Math.floor(expMinute), " minutes");
      if (expMinute < 30) {
        this.refreshToken();
      }
    },
    refreshToken() {
      console.log("refreshing token...");
      let refreshUrl = "/api/v1/token/refresh";
      let self = this;
      this.authGet(refreshUrl)
        .then(res => {
          let token = res.data.token;
          let expire = res.data.expire;
          let user = {
            token: token,
            expire: expire
          };
          self.$store.dispatch("refreshToken", user);
        })
        .catch(err => {
          console.log("refresh failed!", err);
          self.$message("用户登录过期，请重新登录！");
          this.$store.dispatch("logout");
          /*
          self.$router.push("/user/login");
          */
        });
    }
  }
};
</script>

<style lang="stylus">

*
  margin 0
  padding 0

a
  text-decoration none
  cursor pointer
  color #999
  &:hover
    color #409EFF
</style>

<style lang="stylus">
#app
  font-family "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  overflow hidden
  height 100vh

#header-pane
  border-bottom 1px solid #eee
  box-shadow 1px 0 10px rgba(0,0,0,.1)

  .search
    position relative
    float right
    bottom -12px

  .options
    text-align left

    .user
      cursor pointer

    .user.login
      color gray

#main-pane
  padding 1vh 0 0 0
  overflow hidden
  height 92vh

#footer-pane>a
    margin-right 10px

#nav
  padding 0 20px

  .el-col
    height 60px
    line-height 60px

  .el-menu-item
    padding 0 1vw

#logo
  span
    font-size 1.8em
    text-align left

  span.black
    color black

  #logo-version
    margin-left 5px
    font-size 0.9em
    color #999

#logo-link
  outline none
  text-decoration none

#top-menu
  border-bottom 0

  span
    font-size 1.4em
    font-weight bold
    margin-left 0px

.el-main
  padding 0



div.center-pane
  text-align left
  margin 0px auto
  width 80vw
  border 1px solid #eee
  border-radius 4px
  box-shadow 1px 0 5px rgba(0,0,0,.1)
  padding 0 1vw
  height 90vh
  background-color #fff

  &.wide
    width 95vw

  &.narrow
    width 60vw
    height 88vh
    padding 1vh 1vw

  &.form
    width 60vw
    height auto
    padding 1vh 1vw


  .title-bar
    margin 0
    border-bottom 1px solid #eee
    height 50px
    line-height 50px

    .title
      font-weight bold
      font-size 1.2em

      .title-icon
        color #888

    .right-bar
      float right
      margin-right 0.5vw

  .form-pane
    margin 1vh 0



span.red
  color red

.scrollbar-thumb
  background-color #409EEF

span.right
  float right
  margin-right 1vw

</style>
